import muDialog from './index.vue';

function Dialog(msg, option) {
    if (!(this instanceof Dialog)) {
        return new Dialog(msg, option);
    }
    this.defaultOption = Object.assign({ delay: 0, mask: false, position: '' }, option || {});
    this.id = id++;
    dialogs.push(this);
    this.init(msg);
    this.autoClose();
}

//最底部位置
let bottom = 0;

//所有的弹出框对象
const dialogs = [];

//唯一ID
let id = 0;

//自动关闭
Dialog.prototype.autoClose = function () {
    if (this.defaultOption.delay > 0) {
        this.defaultOption.delay = Math.max(1000, this.defaultOption.delay);
        setTimeout(() => {
            this.remove();
        }, this.defaultOption.delay);
    }
}

//计算底部位置
Dialog.prototype.getHeight = function () {
    return this.container.offsetHeight;
}

//使用观察者模式告知删除
//接收通知
Dialog.prototype.receive = function (height) {
    this.resetTop(height);
}

//通知
Dialog.prototype.notify = function () {
    const height = -(this.getHeight() + 10);
    if (this.defaultOption.position === '') {
        bottom += height;
    }
    dialogs.forEach(item => {
        if (item.id > this.id) {
            item.receive(height);
        }
    });
}

Dialog.prototype.resetTop = function (top) {
    if (!isNaN(top)) {
        const originHeight = parseInt(this.container.style.top.replace('px'));  //原始高度
        top += originHeight;
        this.container.style = `top:${top}px; transition: top .2s linear;`;
    } else {
        if (this.defaultOption.position === '') {
            top = bottom + 10;
            bottom += 10;
        }
        //改变容器位置
        this.container.style.top = top + 'px';
    }
}

Dialog.prototype.init = function (content) {
    this.container = document.createElement('div'); //创建一个div容器
    this.container.className = "mu-dialog";
    this.header = document.createElement('div');    //头部容器
    this.header.className = "header";
    this.closeButton = document.createElement('i'); //关闭按钮
    this.closeButton.className = 'mu-iconfont mu-icon-close close';
    this.closeButton.onclick = () => {
        this.remove();
    };
    this.header.appendChild(this.closeButton);
    this.content = document.createElement('div');  //创建一个div用于显示content内容
    this.content.innerHTML = content;
    this.content.className = 'content';
    this.resetTop();
    this.container.appendChild(this.header);
    this.container.appendChild(this.content);
    if (this.defaultOption.mask) {
        this.mask = document.createElement("div");
        this.mask.style = 'position: fixed;z-index: 99999;background: black;opacity: 0;left: 0;top: 0;right: 0;bottom: 0;transition: opacity 0.2s;';
        this.mask.onclick = () => {
            this.remove();
        };
        document.body.appendChild(this.mask);
    }
    document.body.appendChild(this.container);  //将容器加入到body最后
    this.container.classList.add('mu-show' + this.defaultOption.position);
    if (this.defaultOption.position === '') {
        bottom += this.getHeight();
    }
    this.mask && (this.mask.style.opacity = 0.5);
}

Dialog.prototype.remove = function () {
    const index = dialogs.findIndex(c => c.id === this.id);
    dialogs.splice(index, 1);
    this.notify();  //通知下边的提示框已删除
    this.container.classList.add('mu-close');
    this.mask && (this.mask.style.opacity = 0);
    setTimeout(() => {
        if (this.container.parentElement) {
            this.container.parentElement.removeChild(this.container);   //移除弹出框
            this.mask && this.mask.parentElement.removeChild(this.mask);
            this.container = null;
            this.mask = null;
        }
    }, 200);
}

Dialog.install = function (vue) {
    vue.prototype.$mudialog = Dialog;
    vue.component(muDialog.name, muDialog);
}

export default Dialog;